<template>
  <ReportPage >
    <q-card flat class="my-card card-radius">
      <div class="q-pa-sm">
        <div class="page-header">REPAIRING DETAILS OVERVIEW</div>
        <div class="row justify-left items-center q-my-md">
          <div class="weight">System:</div>
          <q-select
            v-model="system"
            :options="inputOptionStore.data.system"
            class="input-css"
            borderless
            dense
            style="width: 200px"
          ></q-select>
          <div class="weight q-ma-sm">Year:</div>
          <q-select
            v-model="year"
            :options="inputOptionStore.yearOptions"
            class="input-css"
            borderless
            dense
            style="width: 200px"
          ></q-select>
          <q-card-actions>
            <q-btn label="submit" class="default-btn" @click="initData"> </q-btn>
          </q-card-actions>
        </div>
      </div>
      <div class="row justify-center items-center q-my-sm">
          <div  bordered class="my-card " style="height: 500px; width: 1000px">
            <q-card-section>
              <div class="text-h4">Repairing Details Overview</div>
            </q-card-section>
            <q-card-section style="height: 500px; width: 1000px">
              <v-chart class="chart" :option="repairingOption" autoresize />
            </q-card-section>
          </div>
      </div>

    </q-card>
    <q-card class="my-card q-my-md card-radius" >
      <q-tabs
        v-model="tab"
        dense
        active-color=""
        activeBgColor="white"
        indicator-color="primary"
        content-class="tabs-css"
        align="justify"
        narrow-indicator
        >
        <!-- @update:model-value="changeTab" -->
        <q-tab name="notafault" label="NOT A FAULT (E.G PM, IGI)" />
        <q-tab name="faultcannotberepeated" label="FAULT CANNOT BE REPEATED (CM)" />
        <q-tab name="faultfound" label="FAULT FOUND (CM)" />
      </q-tabs>

      <q-tab-panels v-model="tab" animated>
        <q-tab-panel name="notafault">
          <RepairDetailTable :system="system"  :year="year" :repair_detail="'NOT A FAULT (E.G PM, IGI)'"></RepairDetailTable>
        </q-tab-panel>

        <q-tab-panel name="faultcannotberepeated">
          <RepairDetailTable :system="system"  :year="year" :repair_detail="'FAULT CANNOT BE REPEATED (CM)'"></RepairDetailTable>
        </q-tab-panel>
        <q-tab-panel name="faultfound">
          <RepairDetailTable :system="system"  :year="year" :repair_detail="'FAULT FOUND (CM)'"></RepairDetailTable>
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </ReportPage>
</template>

<script setup lang="ts">

import VChart, { THEME_KEY } from 'vue-echarts';
import { use } from 'echarts/core';
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
import {
  PieChart,
  LineChart,
  BarChart,
  SunburstChart,
  MapChart,
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  // SingleAxisComponent,
  ToolboxComponent,
  AxisPointerComponent,
  VisualMapComponent,
  GeoComponent,
} from 'echarts/components';
import { repairingOverview } from 'src/services/reportService';

const repairingOption = ref({
  title: {
    text: '',
    subtext: '',
    left: 'center',
  },
  xAxis: {
    type: 'category',
    data: ['NOT A FAULT (E.G PM, IGI)', 'FAULT CANNOT BE REPEATED (CM)', 'FAULT FOUND (CM)'],
    axisLabel: {
      interval: 0,
      rotate: 0, //If the label names are too long you can manage this by rotating the label.
    },
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Access From',
      type: 'bar',
      data: [] as RepairingOverview[],
      label: {
        show: true,
        position: 'top',
        formatter: (value: {data: {value:number}}) => {
            return Math.floor(100 * value.data.value / maxValue.value) + '%';
          
        }
        },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
  
    },
  ],
})

// for pie graph
// const repairingOption = ref({
//   title: {
//     text: '',
//     subtext: '',
//     left: 'center',
//   },
//   tooltip: {
//     trigger: 'item',
//   },
//   legend: {
//     orient: 'vertical',
//     left: 'left',
//   },
//   series: [
//     {
//       name: 'Access From',
//       type: 'pie',
//       radius: '50%',
//       data: [] as RepairingOverview[],
//       label: {
//           formatter: '{b}: {@2012} \n ({d}%)'
//         },
//       emphasis: {
//         itemStyle: {
//           shadowBlur: 10,
//           shadowOffsetX: 0,
//           shadowColor: 'rgba(0, 0, 0, 0.5)',
//         },
//       },
  
//     },
//   ],
// })

use([
  SVGRenderer,
  CanvasRenderer,
  PieChart,
  BarChart,
  LineChart,
  MapChart,
  SunburstChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  ToolboxComponent,
  AxisPointerComponent,
  VisualMapComponent,
  GeoComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
]);

provide(THEME_KEY, 'light');

import ReportPage from 'src/pages/ReportPage.vue';
import { useInputOption } from 'src/stores/inputOptionStore';
import { ref, provide, onMounted } from 'vue';
import { RepairingOverview } from 'src/services/type';
import RepairDetailTable from './RepairDetailTable.vue';

const inputOptionStore = useInputOption();

const system = ref('ALL');
const year = ref('ALL');
const maxValue = ref(0)

async function initData(){
  const res = await repairingOverview(system.value, year.value)
  maxValue.value = res.total
  repairingOption.value.series[0].data = res.data
  
}
onMounted(async () => {
  await inputOptionStore.init();
  inputOptionStore.data.system.unshift('ALL')
  inputOptionStore.yearOptions.unshift('ALL')
  
  initData()
})

inputOptionStore.initYears(2018);

const tab = ref('notafault');

</script>

<style scoped>

</style>
